/* BACKGROUND IMAGE OF WEBSITE */
body {
    background-image: url("../IMAGES/home-background-image.jpg");
}

/*a {
    margin: 2.5% 0 0 5%;
    width: 4.88vw;
    height: 4.88vw;
}*/

.border {
    border: solid;
}

/* NAV BAR CONTAINERS CONTAINER */
#logoHeader {
    margin-top: 0;
    width: 25vw;
}

#contentHeader {
    margin-top: 0;
    width: 70vw;
    margin-left: auto;
}

/* NAV BAR CONTAINER */
table {
    overflow-x: hidden;
    width: 100%;
    height: 9.95vw;
    top: 0;
    left: 0;
    right: 0;
    font-family: "Heritage", "Garamond", serif;
    z-index: 10;
}

/* EACH OPTION IN THE NAV BAR TABLE */
th {
    font-family: "Heritage", "Garamond", serif;
    font-size: larger;
    text-align: center;
}

/* HOME IMAGE ON NAV BAR */
#LogoHome {
    width: 9.01vw;
    height: 9.01vw;
}

/* MAKING SURE THE BUTTONS DONT THROW OFF THE FLOW */
.topBar {
    background-color: rgb(213, 213, 213);
    color: rgb(0, 0, 0);
    border-color: rgba(167, 167, 167, 0.8);;
    font-family: "Heritage", "Garamond", serif;
    font-size: clamp(0.85rem, 2vw, 2rem);
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* CURRENT PAGE ON NAVBAR HIGHLIGHTED */
#currentpage {
    color: rgb(251, 95, 181);
}

/* CHANGE BUTTON COLOR WHEN MOUSE IS OVER */
.topBar:hover, #currentpage:hover, #ShopButton:hover, #ReviewButton:hover {
    background-color: rgba(167, 167, 167, 0.8);
    color: rgb(254, 21, 161);
    font-size: 2.5rem;
}

/* MAIN DISPLAY CONTAINER */
#ShopAndFeaturedContainer {
    overflow-x: hidden;
    display: flex;
    width: 100%;
}

/* SHOP ENCOURAGEMENT CONTAINER */
#ShopContainer {
    width: 50%;
}

/* SHOP ENCOURAGEMENT TEXT */
#ShopText {
    font-family: "Playfair", "Garamond", serif;
    text-align: center;
    font-size: 2.08vw;
}

/* SHOP BUTTON */
#ShopButton {
    background-color: rgb(213, 213, 213);
    color: rgb(0, 0, 0);
    border-color: rgba(167, 167, 167, 0.8);;
    font-family: "Heritage", "Garamond", serif;
    font-size: clamp(0.85rem, 2vw, 2rem);
    width: 90%;
    height: 35%;
    margin-left: 5%;
    cursor: pointer;
}

/* FEATURED SALE CONTAINERS */
#FeaturedImageContainer {
    width: 40%;
}

#FeaturedTextContainer {
    width: 45%;
    cursor: pointer;
}

/* FEATURED IMAGE */
#FeaturedImage {
    width: 30vw;
    height: 30vw;
    object-fit: contain;
}

/* FEATURED TEXT */
#FeaturedText {
    font-family: "Playfair", "Garamond", serif;
    text-align: center;
    font-size: 2.08vw;
    margin-right: 25%;
    box-shadow: 0px 0px 7px black;
}

/* AGENCIES REFERENCE CONTAINER */
#AgenciesContainer {
    display: flex;
    background-color: rgba(235, 212, 222, 0.5);
    width: 100%;
    overflow-x: hidden;
}

/* AGENCIES REFERENCE TITLE */
#AgenciesText {
    margin-left: 5%;
    font-family: "Heritage", "Garamond", serif;
    font-size: 2.08vw;
    text-align: center;
    width: 10%;
}

/* AGENCY LOGOS */
.AgencyLogos {
    margin: 2.5% 0 0 5%;
    width: 4.88vw;
    height: 4.88vw;
    object-fit: contain;
}

/* REVIEWS */
#ReviewsContainer {
    margin-left: 5%;
    width: 60%;
    overflow-x: hidden;
}

/* REVIEWS TITLE */
#ReviewsTitle {
    font-family: "Playfair", "Garamond", serif;
    font-size: 2.08vw;
    font-weight: bold;
    text-align: center;
}

.ReviewSwitches {
    font-family: "Heritage", "Garamond", serif;
    font-size: 3vw;
    font-weight: bold;
    text-align: center;
    width: 10vw;
    height: 6vw;
}

.ReviewSwitches:hover {
    color: rgb(251, 95, 181);
    cursor: pointer;
}

/* REVIEWS */
.ReviewTexts {
    font-family: "Playfair", "Garamond", serif;
    font-size: 1.75vw;
}

/* REVIEWED PRODUCT CONTAINERS */
.ReviewedProductContainers {
    display: flex;
    width: 100%;
}

/* REVIEWED PRODUCT IMAGES */
.ReviewedProductImages {
    padding-right: 5%;
    width: 6.51vw;
    height: 6.51vw;
    object-fit: cover;
}

/* REVIEW BUTTON */
#ReviewButton {
    background-color: rgb(213, 213, 213);
    color: rgb(0, 0, 0);
    border-color: rgba(167, 167, 167, 0.8);;
    font-family: "Heritage", "Garamond", serif;
    font-size: clamp(0.85rem, 2vw, 2rem);
    width: 90%;
    height: 35%;
    margin-left: 5%;
    cursor: pointer;
}

#ReferenceLogosContainer {
    margin-top: 10%;
    margin-bottom: 5%;
}

.ReferenceImages {
    margin-right: 5%;
    margin-left: 20%;
    width: 4.88vw;
    height: 4.88vw;
}

/* ANIMATION REFERENCES */
.grow:hover {
    animation-name: grow;
    animation-duration: 0.5s;
}

.shrink {
    animation-name: shrink;
    animation-duration: 0.5s;
}

.growcurrent:hover {
    animation-name: growcurrent;
    animation-duration: 0.5s;
}

.shrinkcurrent {
    animation-name: shrinkcurrent;
    animation-duration: 0.5s;
}

.itemhover:hover {
    animation-name: itemhover;
    animation-duration: 0.5s;
}

.slide-in {
    animation-name: slide-in;
    animation-duration: 0.5s;
}

/* ANIMATIONS */
@keyframes grow {
    0% {background-color: rgb(213, 213, 213);
        color: rgb(0, 0, 0);
        font-size: clamp(0.85rem, 2vw, 2rem);}
    100% {background-color: rgba(167, 167, 167, 0.8);
        color: rgb(254, 21, 161);
        font-size: 2.5rem;}
}

@keyframes shrink {
    0% {background-color: rgba(167, 167, 167, 0.8);
        color: rgb(254, 21, 161);
        font-size: 2.5rem;}
    100% {background-color: rgb(213, 213, 213);
        color: rgb(0, 0, 0);
        font-size: clamp(0.85rem, 2vw, 2rem);}
}

@keyframes growcurrent {
    0% {background-color: rgb(213, 213, 213);
        color: rgb(251, 95, 181);
        font-size: clamp(0.85rem, 2vw, 2rem);}
    100% {background-color: rgba(167, 167, 167, 0.8);
        color: rgb(254, 21, 161);
        font-size: 2.5rem;}
}

@keyframes shrinkcurrent {
    0% {background-color: rgba(167, 167, 167, 0.8);
        color: rgb(254, 21, 161);
        font-size: 2.5rem;}
    100% {background-color: rgb(213, 213, 213);
        color: rgb(251, 95, 181);
        font-size: clamp(0.85rem, 2vw, 2rem);}
}

@keyframes itemhover {
    0% {border-radius: 0px;
        border-color: white;
        box-shadow: 0px 0px 0px black;}
    100% {border-radius: 7px;
        border-color: white;
        box-shadow: 0px 0px 7px black;}
}

@keyframes slide-in {
    0% {padding-left: 10vw;}
    100% {padding-left: 0vw;}
}

/* IMPORTED FONTS */
@font-face {
    font-family: Quicksand;
    src: url("Quicksand-Regular.ttf");
}

@font-face {
    font-family: Heritage;
    src: url("ModernHeritageDisplay.otf");
}

@font-face {
    font-family: Playfair;
    src: url("PlayfairDisplay.ttf");
}

/*////////////////////////////////////////////////////////////
/////////////////////// MOBILE PORTING ///////////////////////
///////////////////////////////////////////////////////////*/


@media screen and (max-width: 1000px) {
    #ShopAndFeaturedContainer {
        display: block;
    }

    #ShopContainer {
        width: 80vw;
        margin-left: auto;
        margin-right: auto;
        padding-bottom: 2vh;
    }

    #ShopText {
        font-size: 6vw;
    }

    #ShopButton {
        font-size: 8vw;
        height: 25vw;
    }

    #FeaturedImageContainer {
        width: 80%;
        margin-left: auto;
        margin-right: auto;
        padding-bottom: 2vh;
    }

    #FeaturedImage {
        width: 50vw;
        height: 50vw;
        margin-left: 13vw;
    }

    #FeaturedTextContainer {
        width: 80vw;
        margin-left: auto;
        margin-right: auto;
        padding-bottom: 2vh;
    }
    
    #FeaturedText {
        margin-right: 5vw;
        margin-left: 5vw;
        font-size: 5vw;
    }

    #ReviewsContainer {
        width: 90%;
    }

    #ReviewsTitle {
        font-size: 5vw;
    }

    .ReviewTexts {
        font-size: 4vw;
    }

    .ReviewedProductImages {
        width: 20vw;
        height: 20vw;
    }

    #ReviewButton {
        width: 90%;
        height: 20vw;
        font-size: 8vw;
    }

    .ReferenceImages {
        margin-right: 11vw;
        margin-left: 11vw;
        width: 10vw;
        height: 10vw;
    }
}

@media screen and (max-width: 750px) {
    /* CHANGE BUTTON COLOR WHEN MOUSE IS OVER */
    .topBar:hover, #currentpage:hover {
        background-color: rgba(167, 167, 167, 0.8);
        color: rgb(254, 21, 161);
        font-size: 2vw;
    }

    .ReferenceImages {
        margin-right: 10vw;
        margin-left: 10vw;
        width: 10vw;
        height: 10vw;
    }

    .ReviewSwitches {
        width: 16vw;
        height: 11vw;
        font-size: 7vw;
    }

    /* ANIMATIONS */
    @keyframes grow {
        0% {background-color: rgb(213, 213, 213);
            color: rgb(0, 0, 0);}
        100% {background-color: rgba(167, 167, 167, 0.8);
            color: rgb(254, 21, 161);}
    }

    @keyframes shrink {
        0% {background-color: rgba(167, 167, 167, 0.8);
            color: rgb(254, 21, 161);}
        100% {background-color: rgb(213, 213, 213);
            color: rgb(0, 0, 0);}
    }
}

@media screen and (max-width: 550px) {

}

@media screen and (max-width: 400px) {
    /* MAKING SURE THE BUTTONS DONT THROW OFF THE FLOW */
    .topBar {
        background-color: rgb(213, 213, 213);
        color: rgb(0, 0, 0);
        border-color: rgba(167, 167, 167, 0.8);
        font-size: 2.5vw;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }

    /* CHANGE BUTTON COLOR WHEN MOUSE IS OVER */
    .topBar:hover, #currentpage:hover {
        background-color: rgba(167, 167, 167, 0.8);
        color: rgb(254, 21, 161);
        font-size: 2.5vw;
    }
}

@media screen and (max-width: 300px) {
    /* MAKING SURE THE BUTTONS DONT THROW OFF THE FLOW */
    .topBar {
        background-color: rgb(213, 213, 213);
        color: rgb(0, 0, 0);
        border-color: rgba(167, 167, 167, 0.8);
        font-size: 2vw;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }

    /* CHANGE BUTTON COLOR WHEN MOUSE IS OVER */
    .topBar:hover, #currentpage:hover {
        background-color: rgba(167, 167, 167, 0.8);
        color: rgb(254, 21, 161);
        font-size: 2vw;
    }
}